<template>
	<view>
		<!-- 列表栏 -->
		<view class="zcModelItem">
				<block v-for="(item,index) in InsurePolicy" :key="index" >
					<view class="zcModel-card" @tap="doOrderDetail(item)">
						<view class="zcModel-card-title uni-flex zcAlignI_center zcJustifyC_between">
							<view class="uni-flex zcAlignI_center">
								<view class="uni-flex zcAlignI_center" style="width:75upx;margin-right: 8px;">
									<image :src="item.InsureCompanyLogo.LUrl" mode="widthFix"  style="height: 38upx;"></image>
								</view>
								<view class='insureCompany'>{{item.InsureCompany}}</view>
							</view>
							<view class="uni-flex zcAlignI_center">
								<view v-if="!isAlter">￥</view>
								<view  v-if="isAlter"></view>
								<view class='insureCompany' v-if="!isAlter">{{item.InsureMoney}}</view>
								<view class='insureCompany' v-if="isAlter" :class="isAlter?'iconfont icon-bianji1':''"> </view>
							</view>
						</view>
						<view class="zcModel-card-item uni-flex zcAlignI_center zcJustifyC_between list_info_middle">
							<view class="uni-flex zcFlex_column  list_info_left zcRelative">
								<view class="">{{item.VehiclePlateNo}}</view>
								<view class="">{{item.CustomerName}}</view>
							</view>
							<view class="uni-flex zcFlex_column">
								<view class="">车型</view>
								<view class="">{{item.VehicleType}}</view>
								<view class="">VIN码</view>
								<view class="">{{item.VehicleVIN}}</view>
							</view>
							<view class="" :style='{"background":btnColor[item.type]}'>{{item.type}}</view>
						</view>
						<view class="zcModel-card-foot uni-flex zcAlignI_center zcJustifyC_between list_info_bottom">
							<view class="uni-flex zcFlex_column uni-flex-item zcAlignI_center">
								<view class="">状态</view>
								<view class="statusColor" :class=statusColor[item.status]>{{item.status}}</view>
							</view>
							<view class="uni-flex zcFlex_column uni-flex-item zcAlignI_center">
								<view class="">联系方式</view>
								<view class="">{{item.CustomerTelephone}}</view>
							</view>
							<view class="uni-flex zcFlex_column uni-flex-item zcAlignI_center">
								<view class="">{{item.status==='已完成'?'完成时间':item.tabName=='算价'?'报价时间':'核保时间'}}</view>
								<view class="">{{(item.status==='已完成')?item.InsureSubmitDate:(item.tabName=='算价')?item.QueryPriceDate:(item.status=='待修改')?item.LDate:item.InsurePurchaseDate}}</view>
							</view>
						</view>
                        <view v-if="isModify" class="zcModel-card-foot uni-flex zcJustifyC_between" style="padding: 0 20upx;border-top: 1px dashed #E5E5E5;margin-top: 10rpx;">
                            <view class="uni-flex" style="width: 20%;">
                            	<view class='insureCompany'>描述：</view>
                            </view>
                            <view class="uni-flex zcAlignI_center">
                            	<view class='insureCompany'>{{item.CallComments}}</view>
                            </view>
                        </view>	
					</view>
														
				</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingText:'',
				logoSrc:{
					"中国人保":this.$ZcPublic.Domain+'UniImages/ZH_renbao.png',
					"中国平安":this.$ZcPublic.Domain+'UniImages/ZH_taipin.png',
					"中银保险":this.$ZcPublic.Domain+'UniImages/ZH_zhongyin.png',
				},
				btnColor:{
					"经济型":"#029CFB ",
					"无忧型":"#F08F48 ",
				},
				statusColor:{
					"已算价":'statusColor1',
					"已完成":'statusColor1',
					"未支付":'statusColor2'
				}
			}
		},
		props:{
			InsurePolicy:Array,
			isAlter:{
				type:Boolean,
				default:false
			},
            isModify:{type:Boolean,default:false}
		},
		methods:{
			doOrderDetail(item){
				this.$emit("doOrderDetail",item)
			}
		}
	}
</script>

<style scoped>
	.container{position: absolute;top: 0;left: 0;display: flex;flex-direction: column;}
	/* 搜索栏样式 */
	.input-view {
		/* width: 92%; */
		display: flex;
		background-color: #FFFFFF;
		height: 72upx;
		border-radius: 10upx;
		/* overflow: hidden; */
		/* padding: 0 4%; */
		flex-wrap: nowrap;
		margin: 24upx;
		line-height: 72upx;
		flex: 1;
		padding-right: 16upx;
	}
	
	.input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.input-view .input {
		height: 72upx;
		line-height: 72upx;
		padding: 0 3%;
		flex: 1;
	}
	
	/* 列表样式 */
	.zcModelItem{height: 100%;display: flex;flex-direction: column;flex: 1;overflow: hidden;}
	.list{overflow: auto!important;}
	.zcModel-card{margin: 20upx;padding: 20upx 0!important;background-color: #FFFFFF;box-shadow: 0 1px 5px #CCCCCC;border-radius: 10upx;}
	.zcModel-card-title{border-bottom: 2upx solid #E5E5E5;padding: 10upx 20upx;}
	.zcModel-card-title view{font-size: 30upx;}
	.zcModel-card-title>view:last-child view:first-child{font-size: 22upx!important;margin-right: 6upx;margin-top: 12upx;}
	.zcModel-card-item{padding: 10upx 20upx;box-sizing: border-box;}
	.zcModel-card-item view{display: flex;box-sizing: border-box;line-height: 1;font-size: 24upx;}
	.zcModel-card-item view:first-child{flex-shrink: 0;margin-right: 20upx;}
	.zcModel-card-item view:last-child{flex-shrink: 0;}
	.zcModel-card-item-text{white-space: normal;display: block;width: 60%;}
/* 2019-10-24样式调整 */	
/* .insureCompany{
	position:relative ;
	top:-4upx;
	font-size: 34upx;
	font-weight: 400;
} */
.list_info_middle{
	padding: 20upx 0;
	border-bottom: 1upx solid  #E5E5E5;
}
.list_info_left{
		text-align: left;
		margin-left: 45upx;
}
.list_info_left>view{
	font-size: 36upx;
	margin-top: 10upx ;
	font-weight: 500;
}
.list_info_left>view:first-child{
	margin-bottom: 25upx 
}
.list_info_middle>view:nth-of-type(2)>view{
	/* font-size: 28upx; */
	margin-bottom: 12upx;
}
.list_info_middle>view:nth-of-type(3){
	position: relative;
	top: -48upx;
	right:10upx;
	padding: 11upx 20upx 10upx 20upx;
	border-radius: 25upx;
	background-color:#029CFB ;
	color:#fff;
	/* font-size: 29upx; */
}
.list_info_bottom{
	padding-top: 12upx;
}
.list_info_bottom>view:first-child{position: relative;justify-content: center;}
.list_info_bottom>view:first-child:after{border-right: 2upx solid #E5E5E5;height: 70%;content: '';position: absolute;right: 0;}
.list_info_bottom>view>view:nth-of-type(1){
	color: #979797;
}
.list_info_bottom>view>view:nth-of-type(2){height: 46upx;}
.statusColor{
	color:#F79755
}
.statusColor1{
	color:#9CA75D
}
.statusColor2{
	color:#FC6C6B
}
.icon-bianji1:before{
	color:#1980DC;
	font-size: 38upx !important;
	font-weight: 500;
}
</style>
